<template>
  <view class="login-container">
    <!-- 背景装饰 -->
    <view class="bg-decoration"></view>
    
    <!-- 登录卡片 -->
    <view class="login-card" :animation="animationData">
      <!-- Logo区域 -->
      <view class="logo-container">
        <image src="/static/logo.jpg" mode="aspectFit" class="logo"></image>
        <text class="app-name">工单填报系统</text>
      </view>
      
      <!-- 表单区域 -->
      <view class="form-container">
        <!-- 用户名输入 -->
        <uni-easyinput
          v-model="form.username"
          placeholder="请输入用户名"
          type="text"
          :border="false"
          clearable
        >
          <template slot="prefix">
            <uni-icon type="person" size="20" color="#999"></uni-icon>
          </template> 
        </uni-easyinput>
        
        <!-- 分割线 -->
        <view class="divider"></view>
        
        <!-- 密码输入 -->
        <uni-easyinput
          v-model="form.password"
          placeholder="请输入密码"
          type="password"
          :border="false"
          clearable
        >
          <template slot="prefix">
            <uni-icon type="locked" size="20" color="#999"></uni-icon>
          </template>
        </uni-easyinput>
        
        <!-- 分割线 -->
        <view class="divider"></view>
        
        <!-- 登录按钮 -->
        <button
          class="login-btn"
          @click="handleLogin"
        >
          登录
        </button>
        
        <!-- 其他操作 -->
       <!-- <view class="other-actions">
          <text class="forgot-password" @click="handleForgotPassword">忘记密码?</text>
          <text class="register" @click="handleRegister">注册账号</text>
        </view> -->
      </view>
    </view>
    
    <!-- 页脚 -->
    <view class="footer">
      <text>© 2025 企业管理系统 版权所有</text>
    </view>
  </view>
</template>

<script>
import auth from '/utils/auth.js';
import request from '/utils/request.js';

export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      formValid: false,
			animationData: {},
			errorMessage: '',
    }
  },
  methods: {
    // 表单验证
    validateForm() {
      this.formValid = this.form.username.trim() && this.form.password.trim();
    },
    
    // 登录处理
		async handleLogin() {
			// if (!this.validateForm()) return;
			// 显示加载中
			uni.showLoading({
				title: '登录中...',
				mask: true
			});
			 
			// 模拟登录验证（2秒后返回结果）
			await request.post('/auth/login', {username: this.form.username, password:this.form.password}).then(async (res) => {
				console.log(res, 'res')
				uni.hideLoading();
				
				if (res.code === 200) {
					// 登录成功
					uni.showToast({
						title: '登录成功',
						icon: 'success',
						duration: 1500
					});

					// 存储token
					uni.setStorageSync('token', res.data.access_token);
					
					await request.get('/system/user/getInfo').then(async (res2) => {
						if (res2.code == 200) {
							
							// 存储用户信息
							await uni.setStorageSync('userInfo', {
								username: this.form.username,
								roles: res2.roles,
							});
							
							await uni.switchTab({
								url: '/pages/tabBar/index/index'
							});
							
						}
					})
				} else {
					this.errorMessage = '用户名或密码错误';
					uni.showToast({
						title: this.errorMessage,
						icon: 'error',
						duration: 1500
					});
				}
			});
		},
    
    // 忘记密码
    handleForgotPassword() {
      uni.showModal({
        title: '重置密码',
        content: '请联系管理员重置密码',
        confirmText: '确定',
        showCancel: false
      });
    },
    
    // 注册账号
    handleRegister() {
      uni.navigateTo({
        url: '/pages/register/index'
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  padding: 0 60rpx;
  background-color: #f5f7fa;
  position: relative;
  overflow: hidden;
  
  .bg-decoration {
    position: absolute;
    top: -200rpx;
    right: -200rpx;
    width: 600rpx;
    height: 600rpx;
    border-radius: 50%;
    background: linear-gradient(135deg, #007AFF 0%, #0051CB 100%);
    opacity: 0.1;
    z-index: 0;
  }
  
  .login-card {
    margin-top: 200rpx;
    background-color: #fff;
    border-radius: 24rpx;
    padding: 60rpx 40rpx;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
    z-index: 1;
    
    .logo-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 80rpx;
      
      .logo {
        width: 160rpx;
        height: 160rpx;
        margin-bottom: 30rpx;
      }
      
      .app-name {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
      }
    }
    
    .form-container {
      .divider {
        height: 1rpx;
        background-color: #eee;
        margin: 10rpx 0 30rpx;
      }
      
      .login-btn {
        width: 100%;
        height: 88rpx;
        line-height: 88rpx;
        background: linear-gradient(90deg, #007AFF 0%, #0051CB 100%);
        color: #fff;
        border-radius: 44rpx;
        font-size: 32rpx;
        margin-top: 40rpx;
        box-shadow: 0 8rpx 20rpx rgba(0, 122, 255, 0.2);
        
        &:disabled {
          background: #e5e5e5;
          color: #999;
          box-shadow: none;
        }
      }
      
      .other-actions {
        display: flex;
        justify-content: space-between;
        margin-top: 40rpx;
        
        .forgot-password,
        .register {
          font-size: 28rpx;
          color: #666;
        }
      }
    }
  }
  
  .footer {
    text-align: center;
    padding: 40rpx 0;
    font-size: 24rpx;
    color: #999;
  }
}
</style>